<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul class="tag-tab">
			<li>第一级</li>
			<li>第二级</li>
			<li>第三级</li>
			<li>第四级</li>
		</ul>
		 
     
     <style>
			.tag-tab {
				font-size: 16px;
				height: 24px;
				list-style: none;
			}
			.tag-tab li {
				float: left;
				position: relative;
				padding-right: 12px;
			}
			.tag-tab>li:before,
			.tag-tab>li:after {
				position: absolute;
				top: 0;
				right: -12px;
				border-width: 12px;
				border-color: transparent;
				border-left-color: #333;
				border-style: solid;
				content: "";
				z-index: 1;
			}
			.tag-tab>li:after {
				right: -11px;
				border-left-color: #fff;
			}
			.tag-tab>li:hover {
				color: #009a61;
			}

			.tag-tab>li:hover:before {
				border-left-color: #009a61;
			}
      </style>
		
	</body>
</html>
